<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>纯CSS制作辛普森一家卡通人物动画特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" /><!--CSS RESET-->
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->
	<link href="css/styles.css" rel="stylesheet">
	<link href="css/characters.min.css" rel="stylesheet">
	<style>
		html, body {
			height: 100%;
		}

		#wrap {
			text-align: center
		}

		header .characters .character-row
		{
			padding-top: 90px;
			text-align: center;
		}

		footer {
			padding: 10px 0;
			text-align: center;
			background-color: #f5f5f5;
		}
	</style>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>纯CSS制作辛普森一家卡通人物动画特效 <span>Simpsons characters in pure CSS</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div id="wrap">
		<header class="container">
			<div class="row">
				<div class="col-md-12">
					<h1>The Simpsons in CSS</h1>
					<p>Below are some Simpsons characters made in pure CSS - Made by <a href="https://www.chrispattle.com" target="_blank">Chris Pattle</a>.</p>
					<p><a class="btn btn-large btn-primary" href="https://www.github.com/pattle/simpsons-in-css" target="_blank">View on Github</a></p>
				</div>
			</div>
		</header>
		<div class="container characters">
			<div class="row character-row">
				<div class="col-md-3">        
					<div id="homer" style="margin-top: 72px;">
					<div class="head">

					<div class="hair1"></div>
					<div class="hair2"></div>
					<div class="body head-top"></div>
					<div class="no-border body head-main"></div>
					<div class="no-border m1"></div>
					<div class="no-border m2"></div>
					<div class="no-border m3"></div>
					<div class="no-border m4"></div>
					<div class="no-border neck1"></div>
					<div class="body neck2"></div>
					<div class="body ear">
						<div class="no-border inner1"></div>
						<div class="no-border inner2"></div>
						<div class="no-border body clip"></div>
					</div>
					<div class="mouth">
						<div class="mouth5"></div>
						<div class="mouth2"></div>
						<div class="mouth1"></div>
						<div class="mouth7"></div>
						<div class="no-border mouth3"></div>
						<div class="no-border mouth4"></div>
						<div class="no-border mouth6"></div>
						<div class="no-border mouth8"></div>
					</div>
					<div class="right-eye">
						<div class="no-border right-eye-pupil"></div>
						<div class="no-border body eyelid-top"></div>
						<div class="no-border body eyelid-bottom"></div>
					</div>
					<div class="body nose"></div>
					<div class="body nose-tip"></div>
					<div class="left-eye">
						<div class="no-border left-eye-pupil"></div>
						<div class="no-border body eyelid-top"></div>
						<div class="no-border body eyelid-bottom"></div>
					</div>
					</div>
					</div>

					<h2>Homer</h2>
					<p><a class="btn btn-success" href="https://github.com/pattle/simpsons-in-css/blob/master/css/homer.css">View CSS</a></p>
				</div>
                <div class="col-md-3">
                    <div class="bart" style="margin-top: 75px;">
                        <div class="head">
			    <div class="no-border body hair hair1"></div>
			    <div class="no-border body hair hair2"></div>
			    <div class="no-border body hair hair3"></div>
			    <div class="no-border body hair hair4"></div>
			    <div class="no-border body hair hair5"></div>
			    <div class="no-border body hair hair6"></div>
			    <div class="no-border body hair hair7"></div>
			    <div class="no-border body hair hair8"></div>
			    <div class="no-border body hair hair9"></div>
			    <div class="body mouth-lip2"></div>
			    <div class="no-border body head-left1"></div>
			    <div class="no-border body head-left2"></div>
			    <div class="no-border body head-left3"></div>
			    <div class="no-border body head-left4"></div>
			    <div class="no-border body head-left5"></div>
			    <div class="no-border body head-left6"></div>
			    <div class="no-border body head-left7"></div>
			    <div class="body eyelid"></div>
			    <div class="no-border body mouth"></div>
			    <div class="body mouth-lip"></div>
			    <div class="no-border body head-right2"></div>
			    <div class="no-border body head-right1"></div>
			    <div class="no-border body head-right3"></div>

			    <!-- The ear -->
			    <div class="body ear">
				<div class="no-border inner1"></div>
				<div class="no-border inner2"></div>
				<div class="no-border body clip"></div>
			    </div>

			    <!-- The right eye -->
			    <div class="right-eye">
				<div class="no-border right-eye-pupil"></div>
				<div class="no-border body eyelid-top"></div>
				<div class="no-border body eyelid-bottom"></div>
			    </div>

			    <!-- The nose -->
			    <div class="no-border body nose"></div>
			    <div class="body nose-tip"></div>

			    <!-- The left eye -->
			    <div class="left-eye">
				<div class="no-border left-eye-pupil"></div>
				<div class="no-border body eyelid-top"></div>
				<div class="no-border body eyelid-bottom"></div>
			    </div>

			    <div class="no-border mouth-smile"></div>
			</div>
                    </div>

                    <h2>Bart</h2>
                    <p><a class="btn btn-success" href="https://github.com/pattle/simpsons-in-css/blob/master/css/bart.css">View CSS</a></p>
                </div>
                <div class="col-md-3">
                    <div id="marge">
                        <div class="head">
			    <div class="no-border body head-main"></div>
			    <div class="body mouth-lip2"></div>
			    <div class="body mouth-lip"></div>
			    <div class="no-border body neck"></div>
			    <div class="no-border body mouth"></div>
			    <div class="no-border body neck2"></div>
			    <div class="no-border body neck3"></div>
			    <div class="no-border mouth-smile"></div>

			    <div class="hair hair1 hair-circle"></div>
			    <div class="hair hair2 hair-circle"></div>
			    <div class="hair hair3 hair-circle"></div>
			    <div class="hair hair4 hair-circle"></div>
			    <div class="hair hair5 hair-circle"></div>
			    <div class="hair hair6 hair-circle"></div>
			    <div class="hair hair7 hair-circle"></div>
			    <div class="hair hair8 hair-circle"></div>
			    <div class="hair hair9 hair-circle"></div>
			    <div class="hair hair10 hair-circle"></div>
			    <div class="hair hair11 hair-circle"></div>
			    <div class="hair hair12 hair-circle"></div>
			    <div class="hair hair13 hair-circle"></div>
			    <div class="hair hair14 hair-circle"></div>
			    <div class="hair hair15 hair-circle"></div>
			    <div class="hair hair16 hair-circle"></div>
			    <div class="hair hair17 hair-circle"></div>
			    <div class="hair hair18 hair-circle"></div>
			    <div class="hair hair19 hair-circle"></div>
			    <div class="hair hair20 hair-circle"></div>
			    <div class="hair hair21 hair-circle"></div>
			    <div class="hair hair22 hair-circle"></div>
			    <div class="hair hair23 hair-circle"></div>
			    <div class="hair hair24 hair-circle"></div>
			    <div class="hair hair25 hair-circle"></div>
			    <div class="hair hair26 hair-circle"></div>
			    <div class="hair hair27 hair-circle"></div>
			    <div class="hair hair28 hair-circle"></div>
			    <div class="hair hair29 hair-circle"></div>
			    <div class="hair hair30 hair-circle"></div>
			    <div class="no-border hair hair-main"></div>
			    <div class="no-border hair hair-main2"></div>
			    <div class="no-border hair hair-main3"></div>
			    <div class="no-border hair hair-main4"></div>
			    <div class="no-border hair hair-main5"></div>
			    <div class="no-border hair hair-main6"></div>
			    <div class="no-border hair hair-main7 hair-circle"></div>

			    <!-- The ear -->
			    <div class="body ear">
				<div class="no-border inner1"></div>
				<div class="no-border inner2"></div>
				<div class="no-border body clip"></div>
			    </div>

			    <div class="no-border eyelash1 eyelash"></div>
			    <div class="no-border eyelash2 eyelash"></div>
			    <div class="no-border eyelash3 eyelash"></div>
			    <div class="no-border eyelash4 eyelash"></div>
			    <div class="no-border eyelash5 eyelash"></div>
			    <div class="no-border eyelash6 eyelash"></div>
			    <div class="no-border eyelash7 eyelash"></div>
			    <div class="no-border eyelash8 eyelash"></div>

			    <!-- The right eye -->
			    <div class="right-eye">
				<div class="no-border right-eye-pupil"></div>
				<div class="no-border body eyelid-top"></div>
				<div class="no-border body eyelid-bottom"></div>
			    </div>

			    <!-- The nose -->
			    <div class="no-border body nose"></div>
			    <div class="body nose-tip"></div>

			    <!-- The left eye -->
			    <div class="left-eye">
				<div class="no-border left-eye-pupil"></div>
				<div class="no-border body eyelid-top"></div>
				<div class="no-border body eyelid-bottom"></div>
			    </div>
			</div>
                    </div>

                    <h2>Marge</h2>
                    <p><a class="btn btn-success" href="https://github.com/pattle/simpsons-in-css/blob/master/css/marge.css">View CSS</a></p>
                </div>
		
		<div class="col-md-3">
		    <div id="lisa" style="margin-top: 86px;">
			<div class="head">

			    <div class="no-border body head-main"></div>
			    <div class="no-border body head-main2"></div>
			    <div class="no-border body head-main3"></div>

			    <div class="no-border hair9"></div>
			    <div class="no-border hair10"></div>

			    <div class="body hair hair1"></div>
			    <div class="body hair hair2"></div>
			    <div class="body hair hair3"></div>
			    <div class="body hair hair4"></div>
			    <div class="body hair hair5"></div>
			    <div class="body hair hair6"></div>
			    <div class="body hair hair7"></div>
			    <div class="body hair hair8"></div>

			    <div class="body mouth-lip2"></div>
			    <div class="body mouth-lip"></div>
			    <div class="no-border body neck"></div>
			    <div class="no-border body mouth"></div>
			    <div class="no-border body neck2"></div>
			    <div class="no-border body neck3"></div>
			    <div class="no-border mouth-smile"></div>

			    <!-- The ear -->
			    <div class="body ear">
				<div class="no-border inner1"></div>
				<div class="no-border inner2"></div>
				<div class="no-border body clip"></div>
			    </div>

			    <div class="no-border eyelash1 eyelash"></div>
			    <div class="no-border eyelash2 eyelash"></div>
			    <div class="no-border eyelash3 eyelash"></div>
			    <div class="no-border eyelash4 eyelash"></div>
			    <div class="no-border eyelash5 eyelash"></div>
			    <div class="no-border eyelash6 eyelash"></div>
			    <div class="no-border eyelash7 eyelash"></div>
			    <div class="no-border eyelash8 eyelash"></div>

			    <!-- The right eye -->
			    <div class="right-eye">
				<div class="no-border right-eye-pupil"></div>
				<div class="no-border body eyelid-top"></div>
				<div class="no-border body eyelid-bottom"></div>
			    </div>

			    <!-- The nose -->
			    <div class="no-border body nose"></div>
			    <div class="body nose-tip"></div>

			    <!-- The left eye -->
			    <div class="left-eye">
				<div class="no-border left-eye-pupil"></div>
				<div class="no-border body eyelid-top"></div>
				<div class="no-border body eyelid-bottom"></div>
			    </div>

			    <div class="necklace necklace1"></div>
			    <div class="necklace necklace2"></div>
			    <div class="necklace necklace3"></div>
			    <div class="necklace necklace5"></div>
			    <div class="necklace necklace4"></div>
			</div>
		    </div>
		    
		    <h2>Lisa</h2>
                    <p><a class="btn btn-success" href="https://github.com/pattle/simpsons-in-css/blob/master/css/lisa.css">View CSS</a></p>
		</div>
	    </div>
	    
	    <div class="row character-row">
		<div class="col-md-3">
		    <div id="maggie" style="margin-top: 34px;">
			<div class="head">

			    <div class="no-border body head-main"></div>

			    <div class="body hair hair2"></div>
			    <div class="body hair hair1"></div>
			    <div class="body hair hair3"></div>
			    <div class="body hair hair4"></div>
			    <div class="body hair hair5"></div>
			    <div class="body hair hair6"></div>
			    <div class="body hair hair7"></div>
			    <div class="body hair hair8"></div>

			    <div class="bow bow1"></div>
			    <div class="circle bow bow2"></div>
			    <div class="bow bow3"></div>

			    <div class="no-border body neck"></div>

			    <!-- The ear -->
			    <div class="circle body ear">
				<div class="no-border circle inner1"></div>
				<div class="no-border circle inner2"></div>
				<div class="no-border body clip"></div>
			    </div>

			    <div class="circle body cheek"></div>

			    <div class="no-border eyelash1 eyelash"></div>
			    <div class="no-border eyelash2 eyelash"></div>
			    <div class="no-border eyelash3 eyelash"></div>
			    <div class="no-border eyelash4 eyelash"></div>
			    <div class="no-border eyelash5 eyelash"></div>
			    <div class="no-border eyelash6 eyelash"></div>
			    <div class="no-border eyelash7 eyelash"></div>
			    <div class="no-border eyelash8 eyelash"></div>

			    <!-- The right eye -->
			    <div class="circle eye right-eye">
				<div class="no-border circle pupil"></div>
				<div class="no-border body eyelid-top"></div>
				<div class="no-border body eyelid-bottom"></div>
			    </div>

			    <!-- The nose -->
			    <div class="body nose-tip"></div>

			    <!-- The left eye -->
			    <div class="circle eye left-eye">
				<div class="no-border circle pupil"></div>
				<div class="no-border body eyelid-top"></div>
				<div class="no-border body eyelid-bottom"></div>
			    </div>

			    <div class="circle body mouth"></div>

			    <div class="circle dummy dummy1"></div>
			    <div class="dummy dummy2">
				<div class="dummy dummy3"></div>
			    </div>
			</div>
		    </div>
		    
		    <h2>Maggie</h2>
                    <p><a class="btn btn-success" href="https://github.com/pattle/simpsons-in-css/blob/master/css/maggie.css">View CSS</a></p>
		</div>
                <div class="col-md-3">
                    <div id="mr-burns" style="margin-top: 50px;">
                        <div class="head">
			    <div class="hair"></div>
			    <div class="no-border hair-line hair-line1"></div>
			    <div class="no-border hair-line hair-line2"></div>
			    <div class="no-border hair-line hair-line3"></div>
			    <div class="no-border hair-line hair-line4"></div>

			    <div class="ear">
				<div class="no-border inner1"></div>
				<div class="no-border inner2"></div>
			    </div>

			    <div class="head-main"></div>
			    <div class="no-border head-main2"></div>
			    <div class="no-border head-main3"></div>
			    <div class="no-border head-main4"></div>

			    <div class="sideburn"></div>
			    <div class="liverspot1 liverspot"></div>
			    <div class="liverspot2 liverspot"></div>
			    <div class="liverspot3 liverspot"></div>    

			    <div class="eye-bulge"></div>
			    <div class="eye left-eye">
				<div class="no-border pupil"></div>
				<div class="no-border body eyelid-top"></div>
				<div class="no-border body eyelid-bottom"></div>
			    </div>
			    <div class="eye right-eye">
				<div class="no-border pupil"></div>
				<div class="no-border body eyelid-top"></div>
				<div class="no-border body eyelid-bottom"></div>
			    </div>

			    <div class="no-border nose-bottom"></div>
			    <div class="no-border nose-top1"></div>
			    <div class="no-border nose-top2"></div>
			    <div class="nose-tip"></div>
			    <div class="no-border nose-inner"></div>

			    <div class="no-border eyebrow eyebrow1"></div>
			    <div class="no-border eyebrow eyebrow2"></div>
			    <div class="no-border eyebrow eyebrow3"></div>

			    <div class="no-border neck2"></div>
			    <div class="no-border neck1"></div>
			    <div class="no-border neck3"></div>
			    <div class="no-border neck4"></div>
			    <div class="no-border bottom-lip"></div>

			    <div class="tooth tooth1"></div>
			    <div class="tooth tooth2"></div>
			    <div class="tooth tooth3"></div>
			    <div class="tooth tooth4"></div>
			    <div class="tooth tooth5"></div>
			    <div class="tooth tooth6"></div>
			    <div class="no-border tooth tooth7"></div>
			    <div class="no-border teeth"></div>

			    <div class="no-border top-lip"></div>
			    <div class="no-border top-lip2"></div>
			    <div class="no-border cheek"></div>
			    <div class="nose-curl"></div>
			</div>
                    </div>

                    <h2>Mr Burns</h2>
                    <p><a class="btn btn-success" href="https://github.com/pattle/simpsons-in-css/blob/master/css/mr-burns.css">View CSS</a></p>
                </div>
            
                <div class="col-md-3">
		    <div id="ned-flanders" style="margin-top: 9px;">
			<div class="head">
			    <div class="hair-top hair"></div>
			    <div class="hair-side hair"></div>
			    <div class="no-border neck-bottom"></div>
			    <div class="no-border neck-left"></div>
			    <div class="body lip"></div>
			    <div class="no-border body head-main"></div>
			    <div class="no-border hair-line1 hair-line"></div>
			    <div class="no-border hair-line2 hair-line"></div>
			    <div class="no-border hair-line3 hair-line"></div>
			    <div class="no-border hair-line4 hair-line"></div>
			    <div class="no-border hair-line5 hair-line"></div>
			    <div class="body head-top"></div>
			    <div class="no-border body eye-bulge"></div>
			    <div class="no-border body head-top-inner"></div>
			    <div class="no-border neck-right"></div>
			    <div class="body ear">
				<div class="no-border inner"></div>
			    </div>
			    <div class="no-border sideburn hair"></div>
			    <div class="no-border body head-side"></div>

			    <div class="left-eye eye">
				<div class="no-border pupil"></div>
				<div class="no-border body eyelid-top"></div>
				<div class="no-border body eyelid-bottom"></div>
			    </div>

			    <div class="right-eye eye">
				<div class="no-border pupil"></div>
				<div class="no-border body eyelid-top"></div>
				<div class="no-border body eyelid-bottom"></div>
			    </div>

			    <div class="no-border glasses"></div>

			    <div class="no-border mouth-top"></div>
			    <div class="no-border mouth-left"></div>
			    <div class="no-border mouth-right"></div>
			    <div class="no-border mouth-bottom"></div>
			    <div class="no-border mouth-inner"></div>
			    <div class="no-border tongue"></div>

			    <div class="moustache">
				<div class="no-border moustache-hair1 hair left"></div>
				<div class="no-border moustache-hair2 hair left"></div>
				<div class="no-border moustache-hair3 hair left"></div>
				<div class="no-border moustache-hair4 hair right"></div>
				<div class="no-border moustache-hair5 hair right"></div>
				<div class="no-border moustache-hair6 hair right"></div>
			    </div>

			    <div class="body nose"></div>
			</div>
		    </div>
		    
		    <h2>Ned Flanders</h2>
                    <p><a class="btn btn-success" href="https://github.com/pattle/simpsons-in-css/blob/master/css/ned-flanders.css">View CSS</a></p>
		</div>
		<div class="col-md-3">
		    <div id="krusty">
			<div class="head">
			    <div class="body ear left-ear"></div>
			    <div class="body head-top"></div>
			    <div class="hair hair1"></div>
			    <div class="hair hair2"></div>
			    <div class="hair hair3"></div>
			    <div class="hair hair4"></div>
			    <div class="hair hair5"></div>
			    <div class="hair hair6"></div>
			    <div class="hair hair7"></div>
			    <div class="hair hair8"></div>
			    <div class="hair hair9"></div>
			    <div class="hair hair10"></div>
			    <div class="hair hair11"></div>
			    <div class="hair hair12"></div>
			    <div class="hair hair13"></div>
			    <div class="hair hair41"></div>
			    <div class="hair hair42"></div>
			    <div class="hair hair43"></div>
			    <div class="hair hair44"></div>

			    <div class="hair hair14"></div>
			    <div class="hair hair15"></div>
			    <div class="hair hair16"></div>
			    <div class="hair hair17"></div>
			    <div class="hair hair18"></div>
			    <div class="hair hair19"></div>
			    <div class="hair hair20"></div>
			    <div class="hair hair21"></div>
			    <div class="hair hair22"></div>
			    <div class="hair hair23"></div>
			    <div class="hair hair24"></div>
			    <div class="hair hair25"></div>
			    <div class="hair hair36"></div>
			    <div class="hair hair37"></div>
			    <div class="hair hair38"></div>
			    <div class="hair hair39"></div>
			    <div class="hair hair40"></div>

			    <div class="body ear right-ear">
				<div class="inner"></div>
			    </div>

			    <div class="hair hair26"></div>
			    <div class="hair hair27"></div>
			    <div class="hair hair28"></div>
			    <div class="hair hair29"></div>
			    <div class="hair hair30"></div>
			    <div class="hair hair31"></div>
			    <div class="hair hair32"></div>
			    <div class="hair hair33"></div>
			    <div class="hair hair34"></div>
			    <div class="hair hair35"></div>
			    <div class="mouth mouth-bottom"></div>
			    <div class="no-border mouth mouth-left"></div>
			    <div class="no-border mouth mouth-right"></div>
			    <div class="no-border mouth mouth-right2"></div>
			    <div class="no-border mouth-inner mouth-inner-bottom"></div>
			    <div class="no-border mouth-inner mouth-inner-top"></div>
			    <div class="no-border tongue tongue1"></div>
			    <div class="no-border tongue tongue2"></div>
			    <div class="no-border tongue tongue3"></div>
			    <div class="cheek cheek-left"></div>
			    <div class="cheek cheek-right"></div>
			    <div class="tooth tooth1"></div>
			    <div class="tooth tooth2"></div>
			    <div class="tooth tooth3"></div>
			    <div class="tooth tooth4"></div>
			    <div class="tooth tooth5"></div>
			    <div class="mouth mouth-top2"></div>
			    <div class="no-border cheek cheek-right-inner"></div>
			    <div class="cheek cheek-line"></div>
			    <div class="no-border cheek cheek-left-inner"></div>
			    <div class="left-eye eye">
				<div class="no-border pupil"></div>
			    </div>

			    <div class="mouth mouth-top1"></div>
			    <div class="body eye-bag"></div>

			    <div class="right-eye eye">
				<div class="no-border pupil"></div>
			    </div>

			    <div class="eyebrow"></div>


			    <div class="nose"></div>
			</div>
		    </div>
		    
		    <h2>Krusty the Clown</h2>
                    <p><a class="btn btn-success" href="https://github.com/pattle/simpsons-in-css/blob/master/css/krusty.css">View CSS</a></p>
		</div>
	    </div>
	    <div class="row character-row">
		<div class="col-md-3">
		    <div id="itchy" style="margin-top: 20px;">
			<div class="head">
			    <div class="body ear ear-right"></div>
			    <div class="body ear ear-left"></div>

			    <div class="no-border body body-main"></div>
			    <div class="no-border body body-main3"></div>
			    <div class="body body-main2"></div>
			    <div class="no-border body mouth11"></div>
			    <div class="no-border mouth-inner"></div>

			    <div class="body hair hair1"></div>
			    <div class="body hair hair2"></div>
			    <div class="body hair hair3"></div>
			    <div class="body hair hair4"></div>
			    <div class="body hair hair5"></div>
			    <div class="body hair hair6"></div>
			    <div class="body hair hair7"></div>

			    <div class="tooth tooth1"></div>
			    <div class="tooth tooth2"></div>

			    <div class="mouth8"></div>
			    <div class="body mouth1"></div>
			    <div class="body mouth2"></div>
			    <div class="body mouth3"></div>
			    <div class="mouth4"></div>
			    <div class="mouth5"></div>
			    <div class="no-border body mouth6"></div>
			    <div class="mouth7"></div>
			    <div class="body mouth9"></div>
			    <div class="mouth10"></div>

			    <div class="left-eye eye">
				<div class="no-border pupil"></div>
			    </div>

			    <div class="right-eye eye">
				<div class="no-border pupil"></div>
			    </div>
			    <div class="nose"></div>

			    <div class="spike1"></div>
			    <div class="spike2"></div>
			</div>
		    </div>
		    <h2>Itchy</h2>
                    <p><a class="btn btn-success" href="https://github.com/pattle/simpsons-in-css/blob/master/css/itchy.css">View CSS</a></p>
		</div>
		<div class="col-md-3">
		    <div id="smithers" style="margin-top: 20px;">
			<div class="head">
			    <div class="hair hair4"></div>
			    <div class="hair hair5"></div>
			    <div class="hair hair6"></div>
			    <div class="hair hair7"></div>
			    <div class="hair hair8"></div>
			    <div class="hair hair9"></div>
			    <div class="hair hair10"></div>
			    <div class="hair hair11"></div>
			    <div class="hair hair12"></div>
			    <div class="hair hair13"></div>
			    <div class="hair hair14"></div>
			    <div class="hair hair15"></div>
			    <div class="body head3"></div>
			    <div class="no-border hair hair16"></div>
			    <div class="body head1"></div>
			    <div class="no-border body head2"></div>
			    <div class="head4"></div>
			    <div class="hair hair1"></div>
			    <div class="hair hair2"></div>
			    <div class="no-border hair hair3"></div>
			    <div class="no-border body head7"></div>
			    <div class="body mouth-lip2"></div>
			    <div class="no-border body mouth"></div>
			    <div class="body mouth-lip"></div>
			    <div class="no-border body head5"></div>
			    <div class="head6"></div>

			    <!-- The ear -->
			    <div class="body ear">
				<div class="no-border inner1"></div>
				<div class="no-border inner2"></div>
				<div class="no-border body clip"></div>
			    </div>

			    <div class="eyebrow eyebrow-left"></div>
			    <div class="eyebrow eyebrow-right"></div>
			    <div class="glasses-bridge"></div>
			    <div class="no-border glasses-arm"></div>

			    <!-- The right eye -->
			    <div class="right-eye">
				<div class="no-border right-eye-pupil"></div>
			    </div>

			    <!-- The nose -->
			    <div class="body nose-tip"></div>

			    <!-- The left eye -->
			    <div class="left-eye">
				<div class="no-border left-eye-pupil"></div>
			    </div>

			    <div class="no-border mouth-smile"></div>
			</div>
		    </div>
		    <h2>Smithers</h2>
                    <p><a class="btn btn-success" href="https://github.com/pattle/simpsons-in-css/blob/master/css/smithers.css">View CSS</a></p>
		</div>
		<div class="col-md-3">
		    <div id="comicbookguy">
			<div class="head">
			    <div class="hair hair1"></div>
			    <div class="body head1"></div>
			    <div class="body head2"></div>
			    <div class="no-border body head3"></div>
			    <div class="body head4"></div>
			    <div class="body head5"></div>
			    <div class="no-border body head6"></div>
			    <div class="no-border body head7"></div>
			    <div class="hair hair2"></div>
			    <div class="hair hair3"></div>
			    <div class="hair hair4"></div>

			    <div class="body ear">
				<div class="inner inner1"></div>
				<div class="inner inner2"></div>
			    </div>

			    <div class="body left-eye-bag"></div>
			    <div class="left-eye eye">
				<div class="no-border pupil"></div>
			    </div>
			    <div class="left-eye-top"></div>

			    <div class="body right-eye-bag"></div>

			    <div class="right-eye eye">
				<div class="no-border pupil"></div>
			    </div>
			    <div class="right-eye-top"></div>

			    <div class="body nose"></div>
			    <div class="nose-left"></div>

			    <div class="mouth1"></div>
			    <div class="mouth2"></div>
			    <div class="body mouth3"></div>
			    <div class="mouth4"></div>
			    <div class="no-border body mouth5"></div>

			    <div class="no-border beard beard1"></div>
			    <div class="no-border beard beard2"></div>
			    <div class="no-border beard beard3"></div>
			    <div class="no-border beard beard4"></div>
			    <div class="no-border beard beard5"></div>
			    <div class="no-border beard beard6"></div>
			    <div class="no-border beard beard7"></div>
			    <div class="no-border beard beard8"></div>
			    <div class="no-border beard beard9"></div>
			    <div class="no-border beard beard10"></div>
			    <div class="no-border beard beard11"></div>
			    <div class="no-border beard beard12"></div>
			    <div class="no-border beard beard13"></div>
			    <div class="no-border beard beard14"></div>
			    <div class="no-border beard beard15"></div>
			    <div class="no-border beard beard16"></div>
			    <div class="no-border beard beard17"></div>
			    <div class="no-border beard beard18"></div>
			    <div class="no-border beard beard19"></div>
			    <div class="no-border beard beard20"></div>
			    <div class="no-border beard beard21"></div>
			</div>
		    </div>
		    
		    <h2>Comic Book Guy</h2>
                    <p><a class="btn btn-success" href="https://github.com/pattle/simpsons-in-css/blob/master/css/comicbookguy.css">View CSS</a></p>
		</div>
		<div class="col-md-3">
		    <div id="ralph-wiggum" style="margin-top: 46px;">
			<div class="head">

			    <div class="body head1"></div>
			    <div class="no-border body head2"></div>
			    <div class="hair hair-left hair1"></div>
			    <div class="hair hair-left hair2"></div>
			    <div class="hair hair-left hair3"></div>
			    <div class="hair hair-left hair4"></div>
			    <div class="hair hair-left hair5"></div>
			    <div class="hair hair-left hair6"></div>
			    <div class="hair hair-left hair7"></div>
			    <div class="hair hair-right hair8"></div>
			    <div class="hair hair-right hair9"></div>
			    <div class="hair hair-right hair10"></div>
			    <div class="hair hair-right hair11"></div>
			    <div class="hair hair-right hair12"></div>

			    <div class="body ear">
				<div class="inner1"></div>
				<div class="inner2"></div>
				<div class="no-border body clip"></div>
			    </div>

			    <div class="no-border body mouth5"></div>
			    <div class="body mouth1"></div>
			    <div class="no-border body mouth2"></div>
			    <div class="no-border body mouth3"></div>
			    <div class="no-border body mouth4"></div>

			    <div class="left-eye eye">
				<div class="no-border pupil"></div>
			    </div>

			    <div class="right-eye eye">
				<div class="no-border pupil"></div>
			    </div>

			    <div class="body nose"></div>
			</div>
		    </div>
		    <h2>Ralph Wiggum</h2>
                    <p><a class="btn btn-success" href="https://github.com/pattle/simpsons-in-css/blob/master/css/ralph-wiggum.css">View CSS</a></p>
		</div>
	    </div>
	    <div class="row character-row">
		<div class="col-md-3">
		    <div id="apu">
			<div class="head">
			    <div class="hair hair1"></div>
			    <div class="hair hair2"></div>
			    <div class="body head-main1"></div>
			    <div class="circle body ear">
				<div class="no-border circle inner1"></div>
				<div class="no-border circle inner2"></div>
			    </div>

			    <div class="no-border body neck1"></div>

			    <div class="hair sideburn">
				<div class="no-border hair clip"></div>
			    </div>

			    <div class="circle body eyebrow"></div>
			    <div class="circle body eyebag1"></div>

			    <div class="circle left-eye eye">
				<div class="no-border circle pupil"></div>
				<div class="no-border body eyelid-top"></div>
				<div class="no-border body eyelid-bottom"></div>
			    </div>

			    <div class="circle right-eye eye">
				<div class="no-border circle pupil"></div>
				<div class="no-border body eyelid-top"></div>
				<div class="no-border body eyelid-bottom"></div>
			    </div>

			    <div class="circle body mouth2"></div>

			    <div class="body tooth tooth1"></div>
			    <div class="body tooth tooth2"></div>
			    <div class="body tooth tooth3"></div>
			    <div class="body tooth tooth4"></div>

			    <div class="circle body mouth1"></div>
			    <div class="no-border circle eyebag2"></div>
			    <div class="no-border circle body mouth3"></div>

			    <div class="no-border body neck2"></div>

			    <div class="body nose-tip"></div>
			    <div class="no-border body nose"></div>

			    <div class="no-border moustache moustache-left"></div>
			    <div class="no-border moustache moustache-right"></div>
			</div>
		    </div>
		    
		    <h2>Apu</h2>
                    <p><a class="btn btn-success" href="https://github.com/pattle/simpsons-in-css/blob/master/css/apu.css">View CSS</a></p>
		</div>
	    </div>
	    <div class="row character-row">
		<h2>What's really cool is I can now do stuff like that this...</h2>
	    </div>
	    <div class="row character-row">
		<div class="col-md-3">
		    <div class="bart green">
                        <div class="head">
			    <div class="no-border body hair hair1"></div>
			    <div class="no-border body hair hair2"></div>
			    <div class="no-border body hair hair3"></div>
			    <div class="no-border body hair hair4"></div>
			    <div class="no-border body hair hair5"></div>
			    <div class="no-border body hair hair6"></div>
			    <div class="no-border body hair hair7"></div>
			    <div class="no-border body hair hair8"></div>
			    <div class="no-border body hair hair9"></div>
			    <div class="body mouth-lip2"></div>
			    <div class="no-border body head-left1"></div>
			    <div class="no-border body head-left2"></div>
			    <div class="no-border body head-left3"></div>
			    <div class="no-border body head-left4"></div>
			    <div class="no-border body head-left5"></div>
			    <div class="no-border body head-left6"></div>
			    <div class="no-border body head-left7"></div>
			    <div class="body eyelid"></div>
			    <div class="no-border body mouth"></div>
			    <div class="body mouth-lip"></div>
			    <div class="no-border body head-right2"></div>
			    <div class="no-border body head-right1"></div>
			    <div class="no-border body head-right3"></div>

			    <!-- The ear -->
			    <div class="body ear">
				<div class="no-border inner1"></div>
				<div class="no-border inner2"></div>
				<div class="no-border body clip"></div>
			    </div>

			    <!-- The right eye -->
			    <div class="right-eye">
				<div class="no-border right-eye-pupil"></div>
				<div class="no-border body eyelid-top"></div>
				<div class="no-border body eyelid-bottom"></div>
			    </div>

			    <!-- The nose -->
			    <div class="no-border body nose"></div>
			    <div class="body nose-tip"></div>

			    <!-- The left eye -->
			    <div class="left-eye">
				<div class="no-border left-eye-pupil"></div>
				<div class="no-border body eyelid-top"></div>
				<div class="no-border body eyelid-bottom"></div>
			    </div>

			    <div class="no-border mouth-smile"></div>
			</div>
                    </div>

                    <h2>Green Bart</h2>
                    <p><a class="btn btn-success" href="https://github.com/pattle/simpsons-in-css/blob/master/css/bart.css">View CSS</a></p>
		</div>
		<div class="col-md-3">
		    <div class="bart colourless">
                        <div class="head">
			    <div class="no-border body hair hair1"></div>
			    <div class="no-border body hair hair2"></div>
			    <div class="no-border body hair hair3"></div>
			    <div class="no-border body hair hair4"></div>
			    <div class="no-border body hair hair5"></div>
			    <div class="no-border body hair hair6"></div>
			    <div class="no-border body hair hair7"></div>
			    <div class="no-border body hair hair8"></div>
			    <div class="no-border body hair hair9"></div>
			    <div class="body mouth-lip2"></div>
			    <div class="no-border body head-left1"></div>
			    <div class="no-border body head-left2"></div>
			    <div class="no-border body head-left3"></div>
			    <div class="no-border body head-left4"></div>
			    <div class="no-border body head-left5"></div>
			    <div class="no-border body head-left6"></div>
			    <div class="no-border body head-left7"></div>
			    <div class="body eyelid"></div>
			    <div class="no-border body mouth"></div>
			    <div class="body mouth-lip"></div>
			    <div class="no-border body head-right2"></div>
			    <div class="no-border body head-right1"></div>
			    <div class="no-border body head-right3"></div>

			    <!-- The ear -->
			    <div class="body ear">
				<div class="no-border inner1"></div>
				<div class="no-border inner2"></div>
				<div class="no-border body clip"></div>
			    </div>

			    <!-- The right eye -->
			    <div class="right-eye">
				<div class="no-border right-eye-pupil"></div>
				<div class="no-border body eyelid-top"></div>
				<div class="no-border body eyelid-bottom"></div>
			    </div>

			    <!-- The nose -->
			    <div class="no-border body nose"></div>
			    <div class="body nose-tip"></div>

			    <!-- The left eye -->
			    <div class="left-eye">
				<div class="no-border left-eye-pupil"></div>
				<div class="no-border body eyelid-top"></div>
				<div class="no-border body eyelid-bottom"></div>
			    </div>

			    <div class="no-border mouth-smile"></div>
			</div>
                    </div>

                    <h2>Colourless Bart</h2>
                    <p><a class="btn btn-success" href="https://github.com/pattle/simpsons-in-css/blob/master/css/bart.css">View CSS</a></p>
		</div>
	    </div>
        </div>
        <div id="push"></div>
    </div>
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/css3/css3donghua/201608163875.html">
			  <img src="related/1.jpg" width="300" alt="纯CSS3制作逼真的汽车运动动画"/>
			  <h3>纯CSS3制作逼真的汽车运动动画</h3>
			</a>
			<a href="http://www.htmleaf.com/css3/css3donghua/201507122215.html">
			  <img src="related/2.jpg" width="300" alt="纯CSS3打造炫酷的飞机和轮船动画特效"/>
			  <h3>纯CSS3打造炫酷的飞机和轮船动画特效</h3>
			</a>
		</div>
	</div>
	
</body>
</html>